<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设计模式——桥模式(事件监听回调机制)</title>
    <!-- 引入外部核心js文件 -->
    <script type="application/javascript" charset="UTF-8" src="../../common/CommonUtils.js"></script>
    <script type="application/javascript" charset="UTF-8" src="../../jquery/jquery-1.8.0.min.js"></script>
    <script type="application/javascript" charset="UTF-8">
        // 桥接模式 ： 就是将抽象和实现分离开来，也就是抽象和实现的解耦
        // 比如 ： 圆形 和 正方形 都是属于抽象的形状
        //         画圆 和 画正方形 则是属于实现的画图行为
        //         通过桥接模式就可以把这两者分离开来

        // 应用场景 ： 事件监听回调机制 （用户点击一个按钮，向服务器发送信息）
        /*不使用桥接模式，实现代码如下*/
        /*$(function () {
            // 1 . 前台业务逻辑
            var inp = document.getElementById('inp');
            // 此处采用事件注册的方式，为元素添加事件
            // 由于浏览器之间的差异，事件注册的方法不同
            // 所以，将事件注册方法 addHandler 封装到工具类中
            WL.EventUtil.addHandler(inp, 'click', sendReq);
            //------------------------------------------------

            // 2 . 后天业务逻辑
            function sendReq () {  // 处理后台程序的函数
                //$.post('uRL',{msg:this.value},function (result) {
                    // CallBack
                //});
                alert('发送了数据到后台:' + this.value);
            }
        });*/

        /*利用桥接模式，将前台业务逻辑和后台业务逻辑解耦*/
        $(function () {
            // 1 . 前台业务逻辑
            var inp = document.getElementById('inp');
            // 用事件注册的方式，在元素上添加事件
            WL.EventUtil.addHandler(inp, 'click', bridgeHandler);

            // 桥接模式接口前台业务逻辑和后台业务逻辑
            function bridgeHandler () {
                var msg = this.value;
                sendReq(msg);
            }

            // 2 . 后台业务逻辑
            function sendReq (msg) {
                alert('我也是数据 ' + msg);
            }
        });
    </script>
</head>
<body>
    <input type="button" id="inp" value="我是数据..." />
</body>
</html>